<template>
  <div class="page-cover flex-column-center">
    <img class="b1" src="@/assets/images/b1.png" />

    <div class="w100 flex1"></div>

    <div class="flex-right w100">
      <div class="logo-box">
        <img class="logo-img" src="@/assets/images/logo.png" />
        <img class="logo-cc" src="@/assets/images/b3.png" />
        <img class="logo-tip" src="@/assets/images/b4.png" />
      </div>
    </div>

    <div class="draw-box">
      <img class="draw-img" src="@/assets/images/d1.png" />
      <div class="year-text"><span>{{ year }}</span></div>
    </div>

    <div class="cover-bottom">
      <img class="cover-time" src="@/assets/images/b5.png" />
      <div v-if="start && end" class="cover-ppp">
        <p>阅读“账”单统计时间：</p>
        <p @click.stop="openInfo">
          <span>{{start}}~{{end}}</span>
          <img src="@/assets/images/info.png" />
        </p>
      </div>
    </div>

    <img class="page-bg-title" src="@/assets/images/t1.png" />

    <div class="page-arrow">
      <img src="@/assets/images/arrow.png" />
    </div>

  </div>
</template>
<script>
import moment from 'moment'

export default {
  name: 'pageCover',
  props: ['coverData', 'year'],
  data () {
    return {
      start: '',
      end: ''
    }
  },
  watch: {
    coverData: {
      immediate: true,
      handler (val) {
        if (val) {
          this.start = moment(val.startTime).format('YYYY年MM月DD日')
          this.end = moment(val.endTime).format('YYYY年MM月DD日')
        }
      }
    }
  },
  methods: {
    openInfo () {
      // 开始与结束日期均算零时，比如开始时间2024年1月1日，表示为： 2024/01/01 00:00:00 时刻。
      this.$dialog.alert({
        title: '统计时间说明',
        message: '开始与结束日期均算零时，比如开始时间2024年1月1日，表示为：2024/01/01 00:00:00 时刻。',
        confirmButtonText: '知道了',
        className: 'custom-dialog'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page-cover {
  width: 100%;
  height: 100%;
  background: #efece5;
  position: relative;
  overflow: hidden;
}
.b1 {
  width: 607px;
  height: 90px;
  position: absolute;
  right: 0;
  top: 0;
}
.logo-box {
  width: 894px;
  height: 203px;
  background: url('~@/assets/images/b2.png') no-repeat;
  background-size: 100% 100%;
  padding: 0 36px 5px 0;
  margin: 0 24px 328px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 9;
  .logo-img {
    width: 587px;
    height: 135px;
  }
  .logo-cc {
    width: 380px;
    height: 382px;
    position: absolute;
    top: -56px;
    left: -144px;
  }
  .logo-tip {
    width: 148px;
    height: 163px;
    position: absolute;
    top: 246px;
    right: 43px;
  }
}

.draw-box {
  width: 100%;
  font-size: 0;
  position: relative;
  z-index: 9;
  .draw-img {
    width: 100%;
    position: relative;
  }
  &::before {
    content: '';
    width: 1044px;
    height: 1044px;
    background: #efdd6d;
    border-radius: 50%;
    position: absolute;
    top: -95px;
    right: -241px;
  }
  .year-text {
    width: 210px;
    font-size: 60px;
    line-height: 80px;
    letter-spacing: 6px;
    font-family: 'BERNARD';
    font-weight: bold;
    color: #fff;
    position: absolute;
    left: calc(50% - 130px);
    top: 224px;
    perspective: 800px;
    span {
      padding-left: 10px;
      transform: rotateY(-6deg) rotateZ(1deg);
      display: block;
    }
  }
}

.flex1 {
  flex: 1;
}

.cover-bottom {
  width: 100%;
  // height: 460px;
  flex: 2;
  background: #e97b67;
  border-radius: 180px 180px 0 0;
  position: relative;
  margin-top: 40px;
  .cover-time {
    width: 261px;
    height: 261px;
    position: absolute;
    left: 0;
    top: -188px;
  }
  .cover-ppp {
    font-size: 36px;
    line-height: 52px;
    color: #fff;
    padding: 90px;
    p {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 99;
    }
    img {
      width: 40px;
      height: 40px;
      margin-left: 10px;
    }
  }
}
.page-arrow {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  // background: #e97b67;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 40px;
  top: calc(50% - 50px);
  z-index: 9;
  -webkit-animation: yindao_hd 1s 0s ease infinite both;
  animation: yindao_hd 1s 0s ease infinite both;
  img {
    width: 62px;
    height: 69px;
  }
}

@-webkit-keyframes yindao_hd{
  0%{transform: translateX(0rem);opacity: 1}
  50%{transform: translateX(0.3rem);opacity:1}
  100%{transform: translateX(0rem);opacity: 1}
}
@keyframes yindao_hd{
  0%{transform: translateX(0rem);opacity: 1}
  50%{transform: translateX(0.3rem);opacity:1}
  100%{transform: translateX(0rem);opacity: 1}
}
</style>
